/**
 * 描述: 产品图文详情页
 *
 * @author yangshuangping
 * @since 2021/12/09 17:41
 */
layui.define(['index', 'form', 'table', 'upload'], function (exports) {
    let $ = layui.$;
    let form = layui.form;
    let layer = layui.layer;
    let upload = layui.upload;

    form.render(null, "zmn-form");
    // 初始化文件上传插件
    reLoadImage("graphicImgUrl", json.productGraphic.graphicImgUrl, "graphicImgUrlValue");
    uploaderImage("graphicImgUrl", "graphicImgUrlValue", "png|jpg|jpeg", 300);
    form.verify({
            graphicImgUrl: function (value) {
                // 获取div下隐藏的div
                let graphicImgUrl = document.getElementById('graphicImgUrlValue').value;
                if (zmnUtil.isEmptyNull(graphicImgUrl)) {
                    $("#graphicImgUrl")[0].setAttribute("required", "true");
                    return "图片必传， 请上传图片！";
                }
            },
            graphicGroup: function (value) {
                if (zmnUtil.isEmptyNull(value)) {
                    return "分组名称必填，请填写！";
                }
            },
            graphicTitle: function (value) {
                if (zmnUtil.isEmptyNull(value)) {
                    return "标题必填，请填写！";
                }
            },
            graphicDesc: function (value) {
                if (zmnUtil.isEmptyNull(value)) {
                    return "描述必填，请填写！";
                }
            },
            graphicLink: function (value) {
                if (zmnUtil.isEmptyNull(value)) {
                    return "链接必填，请填写！";
                }
            },
            graphicWapLink: function (value) {
                if (zmnUtil.isEmptyNull(value)) {
                    return "wap链接必填，请填写！";
                }
            }
        }
    )
    // 提交
    form.on('submit(zmn-form-submit)', function (obj) {
        let data = obj.field;
        let url = "/graphic/addEdit.action";

        $.ajax({
            async: false,
            type: "POST", url: url,
            contentType: "application/json", dataType: "json", data: JSON.stringify(data),
            success: function (result) {
                if (result.status == 200) {
                    layer.msg((data.graphicId ? "修改" : "新增") + "成功！", {"icon": 1, "time": 1000}, function () {
                        parent.location.reload();
                    });
                } else {
                    layer.msg(result.message, {"icon": 2});
                }


            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
            }
        })
        return false;
    });

    /**
     * 初始化图片显示
     * @param elemId 选择器id
     * @param pictureUrl 图片地址
     * @param imageValueId 图片inputId
     */
    function reLoadImage(elemId, pictureUrl, imageValueId) {
        zmnUploadUtil.reLoadImage($, elemId, pictureUrl, imageValueId);
    }

    /**
     * 描述: 图片上传方法
     * @param elemId
     * @param valueId
     */
    let indexUploadImags;

    function uploaderImage(elemId, valueId, exts, size) {
        upload.render({
            elem: '#' + elemId,
            exts: exts,
            acceptMime: 'image/*',
            accept: 'images',
            url: '/common/uploadFile.action?folderName=productgraphic',
            size: size,
            before: function (obj) {
                indexUploadImags = layui.layer.load(1, {
                    shade: [0.5, '#DBDBDB']
                });
            },
            done: function (res) {
                if (res.code == 2) {
                    let data = res.data;
                    let src = data.src + "?" + Date.now();
                    reLoadImage(elemId, src, valueId);
                } else {
                    layer.msg("上传失败！")
                }
                layui.layer.close(indexUploadImags);
            }
        });
    }

    //对外暴露的接口
    exports('plat_product_graphic_detail', {});
});
let $ = layui.$;

function deletePicture(element) {
    let elementValue = element + 'Value';
    document.getElementById(element).removeAttribute('style');
    Array.from(document.getElementById(element).children).forEach(function (item) {
        item.removeAttribute('style');
    });
    document.getElementById(elementValue).removeAttribute('value');
}

/**
 * 预览图片
 * @param element
 */
function thePreviewImage(element) {
    let image = new Image();
    image.src = $('#' + element).attr('value');
    let imgHtml = "<img src='" + image.src + "' width='100%' height='100%'/>";
    layer.open({
        type: 1,
        shade: 0.8,
        offset: 'auto',
        area: [600 + 'px', 300 + 'px'],
        shadeClose: true,
        scrollbar: false,
        title: "",
        content: imgHtml,
        cancel: function () {
        }
    });
}